<script setup lang="ts">
import { navigateBack, getEnv } from '@tarojs/taro';
import { reactive, onMounted } from 'vue';

const props = withDefaults(
  defineProps<{
    title: string;
    hookBack?: boolean;
  }>(),
  {
    title: process.env.APP_TITLE,
    hookBack: false,
  },
);

const emits = defineEmits<{
  (e: 'handleBack'): void;
}>();

const state = reactive<{
  /**
   * 在专有钉钉中
   */
  inDD: boolean;
}>({
  inDD: false,
});

function back() {
  if (props.hookBack) {
    emits('handleBack');
  } else {
    navigateBack();
  }
}

onMounted(() => {
  state.inDD =
    (window.navigator.userAgent.includes('DingTalk') &&
      navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) ||
    (window.navigator.userAgent.includes('DingTalk') &&
      navigator.userAgent.search(/android/i) >= 0) ||
    (window.navigator.userAgent.includes('TaurusApp') &&
      navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) ||
    (window.navigator.userAgent.includes('TaurusApp') &&
      navigator.userAgent.search(/android/i) >= 0);
});
</script>

<template>
  <nut-navbar
    v-if="getEnv() === 'WEB' && !state.inDD"
    class="app-navbar"
    :title="props.title"
    :left-show="true"
    @on-click-back="back()"
  />
</template>

<style lang="scss">
.app-navbar {
  .nut-navbar {
    &__left {
      padding-left: 0;
      padding-right: 0.6rem;
    }
  }
}
</style>
